import React, { useState, useEffect } from 'react';
import {
  Form,
  Row,
  Col,
  DatePicker,
  Select,
  Button,
  Input,
  Upload,
} from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { deepCopy, isnullObj } from '../../Control/deepCopy';
import styles from './index.css';

const { RangePicker } = DatePicker;
const { Option } = Select;

const updataBoxText = () => {
  return (
    <div className={styles.updataBoxText}>
      <p>+</p>
      <p>添加图片</p>
    </div>
  );
};

function VoteForm(props) {
  // console.log(props);
  const [voteWay, setVoteWay] = useState('1');

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  const changePicture = (index, a) => {
    if (a.file.status == 'done') {
      let newValue = props.form.getFieldValue('voteObjectVOS');
      newValue[index] = { ...newValue[index] };
      newValue[index].pictureKey = a.file.response.data.imgKey;
      newValue[index].pictureUrl = a.file.response.data.imgUrl;
      props.form.setFieldsValue({
        optionalEntryForms: newValue,
      });
    }
  };
  const deletePicture = (index) => {
    let newValue = props.form.getFieldValue('voteObjectVOS');
    delete newValue[index].pictureKey;
    delete newValue[index].pictureUrl;
    props.form.setFieldsValue({
      optionalEntryForms: newValue,
    });
  };
  const LimitedQuantity = (index) => {
    let newValue = props.form.getFieldValue('voteObjectVOS');
    newValue[index] = { ...newValue[index] };
    if (newValue[index].pictureKey) {
      return true;
    } else {
      return false;
    }
  };

  useEffect(() => {
    if (!isnullObj(props.formData)) {
      let newData = { ...props.formData };
      newData.voteObjectVOS.forEach((item) => {
        item.picture = [
          {
            uid: '-' + item.pictureKey,
            name: item.pictureKey,
            status: 'done',
            url: item.pictureUrl,
          },
        ];
      });
      props.form.setFieldsValue(newData);
    }
  }, []);

  return (
    <div className={styles.VoteForm}>
      <Form
        form={props.form}
        name="VoteForm"
        autoComplete="off"
        initialValues={{
          voteObjectVOS: [{ name: '', instructions: '' }],
          voteDate: props.activityDate,
        }}
        // onFinish={finishBasicData}
      >
        <div className={styles.firstDesc}>基本信息</div>

        <Row className={styles.FromRow}>
          <Col span={10}>
            <Form.Item
              name={`voteDate`}
              label={`活动时间`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  required: true,
                  message: '请选择时间',
                },
              ]}
            >
              <RangePicker
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
              />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item
              name={`voteWay`}
              label={`投票方式`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              initialValue={'1'}
              rules={[
                {
                  required: true,
                  message: '',
                },
              ]}
            >
              <Select
                onChange={(value) => {
                  setVoteWay(value);
                }}
                className={styles.StandardWidth}
              >
                <Option value="1">只可投一次</Option>
                <Option value="2">每日都可投</Option>
              </Select>
            </Form.Item>
          </Col>
          {voteWay == '2' ? (
            <>
              <Col span={10}>
                <Form.Item
                  name={`dayVoteLimit`}
                  label={`单日可投上限`}
                  labelAlign={'left'}
                  labelCol={{ span: 24, offset: 0 }}
                  rules={[
                    {
                      pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                      message: '请输入正确的数字',
                    },
                  ]}
                >
                  <Input
                    placeholder="请输入1-9999999的整数"
                    className={styles.StandardWidth}
                  />
                </Form.Item>
              </Col>
              <Col span={10}>
                <Form.Item
                  name={`singlePlayerLimit`}
                  label={`重复可投上限`}
                  labelAlign={'left'}
                  labelCol={{ span: 24, offset: 0 }}
                  rules={[
                    {
                      pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                      message: '请输入正确的数字',
                    },
                  ]}
                >
                  <Input
                    placeholder="请输入1-9999999的整数"
                    className={styles.StandardWidth}
                  />
                </Form.Item>
              </Col>
            </>
          ) : (
            ''
          )}
        </Row>

        <div className={styles.firstDesc}>投票对象</div>

        <Row className={styles.optionalEntryForms}>
          <Form.List name="voteObjectVOS">
            {(fields, { add, remove }) => {
              // console.log('fields',fields);
              return (
                <>
                  {fields.map((field, index) => {
                    return (
                      <Row
                        className={styles.voteObject}
                        key={field.key + 'Row'}
                      >
                        <Col span={10}>
                          <Form.Item
                            {...field}
                            label={`名称`}
                            key={field.key + 'name'}
                            name={[field.name, 'name']}
                            fieldKey={[field.fieldKey, 'name']}
                            labelAlign={'left'}
                            labelCol={{ span: 24, offset: 0 }}
                            rules={[
                              {
                                required: true,
                                message: '请输入名称',
                              },
                            ]}
                            style={{ margin: '0 8px 0 0' }}
                          >
                            <Input
                              className={styles.StandardWidth}
                              placeholder="请输入投票对象的名称"
                            />
                          </Form.Item>
                        </Col>

                        <Col span={10}>
                          <Form.Item
                            {...field}
                            label={`说明`}
                            key={field.key + 'instructions'}
                            name={[field.name, 'instructions']}
                            fieldKey={[field.fieldKey, 'instructions']}
                            labelAlign={'left'}
                            labelCol={{ span: 24, offset: 0 }}
                            rules={[
                              {
                                required: true,
                                message: '请输入说明',
                              },
                            ]}
                            style={{ margin: '0 8px 0 0' }}
                          >
                            <Input
                              className={styles.StandardWidth}
                              placeholder="请输入投票对象的说明"
                            />
                          </Form.Item>
                        </Col>

                        <Col span={10}>
                          <Form.Item
                            name={[field.name, 'picture']}
                            key={field.key + 'picturekey'}
                            fieldKey={[field.fieldKey, 'picturekey']}
                            label={`图片`}
                            labelAlign={'left'}
                            labelCol={{ span: 24, offset: 0 }}
                            valuePropName="fileList"
                            getValueFromEvent={normFile}
                            style={{ margin: '0 8px 0 0' }}
                            rules={[
                              {
                                required: true,
                                message: '请传入图片',
                              },
                            ]}
                          >
                            <Upload
                              action={'/campus/campusweb/upload/pictureUpload'}
                              accept={'image/*'}
                              listType="picture-card"
                              name={'multipartFile'}
                              onChange={(a) => changePicture(index, a)}
                              onRemove={() => deletePicture(index)}
                            >
                              {LimitedQuantity(index) ? '' : updataBoxText()}
                            </Upload>
                          </Form.Item>
                        </Col>

                        <DeleteOutlined
                          onClick={() => remove(field.name)}
                          className={styles.DeleteOutlined}
                          style={{
                            display: fields.length > 1 ? 'block' : 'none',
                          }}
                        />
                      </Row>
                    );
                  })}
                  <Col span={24}>
                    <Form.Item>
                      <Button
                        className={styles.addBtn}
                        type="dashed"
                        onClick={() => add()}
                        block
                      >
                        + 添加
                      </Button>
                    </Form.Item>
                  </Col>
                </>
              );
            }}
          </Form.List>
        </Row>
      </Form>
    </div>
  );
}
export default VoteForm;
